<template>
  <div class="warpc">
    <div class="menubx">
      <div class="icon1" @click="funs"><van-icon name="arrow-left" /></div>
      <van-tabs v-model="active">
        <van-tab title="热销推荐">
          <div class="menucont">
          </div>
          <div class="cdcontent">
           
            <div class="foodlist" @click="fun">
              <div class="left">
                <img src="yangchaung/Detimg/d1.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">帕特诺尔</p>
                    <p>￥168</p>
                  </div>
                </div>
                <p class="nearly">干粮|1.8kg|幼猫</p>
                <p class="menucd">
                    中国大陆
                </p>
              </div>
            </div>
            <div class="foodlist" @click="fun">
               <div class="left">
                <img src="yangchaung/Detimg/d2.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">盖夫化毛膏</p>
                    <p>￥78</p>
                  </div>
                </div>
                <p class="nearly">肠胃调理|猫</p>
                <p class="menucd">
                    中国大陆
                </p>
              </div>
            </div>
            <div class="foodlist">
              <div class="left">
                <img src="yangchaung/Detimg/d3.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">帕特生命系列主食猫粮</p>
                    <p>￥188</p>
                  </div>

                </div>
                <p class="nearly">冻干粮|1.8kg|成猫</p>
                <p class="menucd">
                  中国大陆
                </p>
              </div>
            </div>
            <div class="foodlist">
              <div class="left">
                <img src="yangchaung/Detimg/d4.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">尾巴生活舔着喝的液体猫草</p>
                    <p>￥49</p>
                  </div>
                </div>
                <p class="nearly">肠胃调理|猫</p>
                <p class="menucd">
                  中国大陆
                </p>
              </div>
            </div>

            <div class="foodlist">
               <div class="left">
                <img src="yangchaung/Detimg/d5.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">尾巴生活玻璃胃专属小蓝杯</p>
                    <p>￥49</p>
                  </div>

                </div>
                <p class="nearly">肠胃调理|猫狗通用</p>
                <p class="menucd">
                  中国大陆
                </p>
              </div>
            </div>


            <div class="foodlist">
               <div class="left">
                <img src="yangchaung/Detimg/d6.jpg" alt="">
              </div>
              <div class="right">
                <div class="pagepic">
                  <div>
                    <p class="goodsname">帕特果蔬系列猫粮</p>
                    <p>￥118</p>
                  </div>

                </div>
                <p class="nearly">干粮|2kg|幼猫</p>
                <p class="menucd">
                  中国大陆
                </p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="猫主粮">
          <div class="notfond">
            <img src="chenkong/imgs/menu/2.gif" alt="" />
            <p>暂无</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
   
  </div>
</template>

<script>

export default {
    methods: {
        funs(){
            this.$router.push('/yacdetailspage')
        },
         fun(){
            this.$router.push('/RecomZiPage')
        }
    },
  data() {
    return {
      objmenu: [],
      active: 0,
    };
  },
 
};
</script>
<style >
.van-swipe__indicator {
  display: none;
}
.van-swipe-item {
  width: 34.4vw;
}
</style>
<style lang="scss" scoped>
.warpc {
  width: 100%;
  .menubx {
    margin-top: 5.333vw;
    .menucont {
      width: 90%;
      margin: auto;
      // background: green;
      .title {
        font-weight: bold;
        padding: 2.133vw 0;
      }
      .foodwarp {
        padding-bottom: 1.333vw;

        img {
          width: 32vw;
          height: 24vw;
          border: 1px solid #f7f7f7;
        }
        p {
          text-align: center;

          font-size: 3.2vw;
        }
        border-bottom: 1px solid #f7f7f7;
      }
    }
    .line {
      width: 100%;
      height: 2.133vw;
      background: #f6f6f6;
    }
    .cdcontent {
      width: 90%;
      margin: auto;
      // background: green;
      .top {
        display: flex;
        justify-content: space-between;
        .search {
          margin-top: 2.333vw;
        }
      }
      .nettfood {
        font-weight: bold;
        padding: 2.133vw 0;
      }
      .foodlist {
        // background: green;
        display: flex;
        justify-content: space-between;
        font-size: 2.667vw;
        width: 95%;
        margin: auto;
        padding-bottom: 4.267vw;
        border-bottom: 1px solid #f7f7f7;
        .left {
          margin-right: 2.667vw;

          img {
            width: 32vw;
            height: 21.333vw;
          }
        }
        .right {
          line-height: 5.333vw;
          .pagepic {
            // width: 70%;
            display: flex;
            justify-content: space-between;

            .img {
              width: 16vw;
              height: 5.667vw;
              border: 1px solid #9d9c9c;
              border-radius: 999rem;
              text-align: center;
              img {
                // line-height: 6.667vw;
                margin-top: 0.833vw;
              }
            }
          }
          .nearly {
            padding: 0.533vw;
            background: #f7f7f7;
            width: 24.333vw;
            text-align: center;
          }
          .menucd {
            width: 42.333vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #969494;
          }
        }
      }
    }
    .notfond {
      margin: auto;
      text-align: center;

      img {
        margin-top: 69.333vw;
        width: 26.667vw;
      }
      p {
        margin-top: 5.333vw;
        font-size: 3.467vw;
        span {
          color: #e99b4d;
        }
      }
    }
  }
  .lastbox {
    height: 16.667vw;
    width: 100%;
  }
}
::v-deep .van-tabs__line {
  height: 1.333vw;
  border-radius: 0%;
  bottom: 6.933vw;
  background-image: linear-gradient(to right, #ed3828, #edac69);
  // background-image: -webkit-linear-gradient(#fb4d32, #e8b373);
}
.icon1 {
  position: absolute;
  top: 3.267vw;
  left: 4.267vw;
  z-index: 999;
  font-size: 4.267vw;
}
.icon2 {
  position: absolute;
  top: 2.133vw;
  right: 2.267vw;
  font-size: 4.267vw;
  // padding-left: 2.667vw;
}
</style>